<template>
	<view class="addAress">
		<view class="contant_box my-mgt-15">
			<view class="contant_box_li my-pdlr-15">
				<view class="contant_box_li_txt">收件人</view>
				<input type="text" v-model.lazy="name" value="" class="inp" placeholder-class="inp_pla" placeholder="名字" />
			</view>
			<view class="contant_box_li my-pdlr-15">
				<view class="contant_box_li_txt">手机号码</view>
				<input type="text" v-model.lazy="phone" value="" class="inp" placeholder-class="inp_pla" placeholder="手机号" />
			</view>
			<view class="contant_box_li my-pdlr-15" @click="choseAddress">
				<view class="contant_box_li_txt">选择地区</view>
				<input type="text" disabled  class="inp" placeholder-class="inp_pla" placeholder="省、市、区" v-if="inpshow" />
				<view class="inp" v-else>
					<text>{{province}}</text><text class="my-mgl-10">{{city}}</text><text class="my-mgl-10">{{area}}</text>
				</view>
				<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/FaFnYvYsKD_rightarrow_icon.png" class="img" mode=""></image>
			</view>
			<view class="contant_box_area my-pdlr-15">
				<view class="contant_area_txt">详细地址</view>
				<textarea value="" v-model.lazy="address" class="inp_area my-mgt-15" placeholder-class="inp_pla" placeholder="小区楼栋/乡村名称" />
				<view class="positioning" @click="onAddress">
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/PxakhXaeMC_add_blank_icon.png" class="img" mode=""></image>
					<view class="my-mgt-3">定位</view>
				</view>
			</view>
			<view class="change_box my-pdlr-15">
				<view class="redio_txt">
					<radio style="transform: scale(0.7);" @click="adressType =!adressType" color="#F05329" value="adr" :checked="adressType"  />
					<text >设为默认地址</text>
				</view>
			</view>
			<view class="complete">
				<button class="btn" @click="addAress">保存</button>
			</view>
		</view>
		<u-picker v-model="addressShow" mode="region" @confirm="changeAdress"></u-picker>
	</view>
</template>

<script>
	import {addaddressApi } from "@/api/myinter.js"
	import { createNamespacedHelpers } from "vuex";
	const { mapActions ,mapMutations } = createNamespacedHelpers(
	    "address"
	);
	export default {
		data() {
			return {
				adressType:true,
				addressShow:false,
				inpshow:true,
				address:'',//详细地址
				area:'',//区
				city:'',//城市
				name:'',//收货人
				phone:null,//手机号
				province:'',//省份
				town:'',//镇/街道
				latitude:'',
				longitude:'',
				type:0,
			};
		},
		onLoad(options) {
			this.type = Number(options.type)
		},
		methods:{
			...mapActions(["getAddressData"]),
			...mapMutations(["filterTrue"]),
			choseAddress(){
				this.addressShow = true
			},
			changeAdress(e){
				this.inpshow = false
				this.province = e.province.label
				this.city = e.city.label
				this.area = e.area.label
			},
			async addAress(){
				let _this = this
				let params = {
					name:this.name,
					phone:this.phone,
					province:this.province,
					city:this.city,
					area:this.area,
					address:this.address,
					town:'',
					default:this.adressType
				}
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await addaddressApi(params)
				if(res.statusCode===200){
					uni.hideLoading()
					uni.showToast({
						title:"新增成功",
						icon:"success",
						duration:2000,
						success() {
							if(_this.type===1){
								uni.redirectTo({
									url:'/pages/mallStore/makeSureOrder'
								})
								_this.getAddressData()
								_this.filterTrue()
							}else{
								uni.redirectTo({
									url:"/pages/my/shippingAddress"
								})
							}
						}
					})
				}
			},
			// 获取当前地理位置
			onAddress(latitude, longitude) {
				let that = this;
				uni.chooseLocation({
					success: (res) => {
						that.hasLocation = true
			
						let {longitude,latitude} = res
			
						that.location = {
							longitude,
							latitude
						};
						that.inpshow = false
						that.province = res.address.slice(0,3);
						that.city = res.address.slice(3,6);
						that.area = res.address.slice(6,9);
						that.address = res.address.slice(9,res.address.length-1);
						that.latitude = res.latitude;
						that.longitude = res.longitude;
			
						let regex = /^(北京市|天津市|重庆市|上海市|香港特别行政区|澳门特别行政区)/;
						let REGION_PROVINCE = [];
						let addressBean = {
							REGION_PROVINCE: null,
							REGION_COUNTRY: null,
							REGION_CITY: null,
							ADDRESS: null
						};
			
						function regexAddressBean(address, addressBean) {
							regex = /^(.*?[市州]|.*?地区|.*?特别行政区)(.*?[市区县])(.*?)$/g;
							let addxress = regex.exec(address);
							addressBean.REGION_CITY = addxress[1];
							addressBean.REGION_COUNTRY = addxress[2];
							addressBean.ADDRESS = addxress[3] + "(" + res.name + ")";
							that.addxress = addxress
						}
						if (!(REGION_PROVINCE = regex.exec(res.address))) {
							regex = /^(.*?(省|自治区))(.*?)$/;
							REGION_PROVINCE = regex.exec(res.address);
							addressBean.REGION_PROVINCE = REGION_PROVINCE[1];
							regexAddressBean(REGION_PROVINCE[3], addressBean);
						} else {
							addressBean.REGION_PROVINCE = REGION_PROVINCE[1];
							regexAddressBean(res.address, addressBean);
						}
						that.ADDRESS_1_STR = addressBean.REGION_PROVINCE + " " +
							addressBean.REGION_CITY + "" +
							addressBean.REGION_COUNTRY
						that.addressBean = addressBean;
					},
					fail: function(res) {
						
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.addAress{
		width: 100%;
		height: 100vh;
		background: #FAFAFA;
		.contant_box{
			width: 100%;
			height: 1150rpx;
			background: #FFFFFF;
			.contant_box_li{
				width: 100%;
				height: 120rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #F5F5F5;
				.contant_box_li_txt{
					width: 160rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
				}
				.inp{
					width: 74%;
				}
				.inp_pla{
					font-size: 30rpx;
					font-weight: 500;
					color: #CCCCCC;
				}
				.img{
					width: 16rpx;
					height: 16rpx;
				}
			}
			.contant_box_area{
				width: 100%;
				height: 180rpx;
				display: flex;
				border-bottom: 1rpx solid #F5F5F5;
				.contant_area_txt{
					width: 20%;
					height: 100%;
					line-height: 90rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
				}
				.inp_area{
					width: 70%;
					height: 100%;
				}
				.inp_pla{
					font-size: 30rpx;
					font-weight: 500;
					color: #CCCCCC;
				}
				.img{
					width:35rpx;
					height: 35rpx;
				}
				.positioning{
					width: 10%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-weight: 400;
					color: #000000;
				}
			}
			.change_box{
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.redio_txt{
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
				}
				.del_tlt{
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
				}
			}
			.complete{
				width: 100%;
				height: 150rpx;
				display: flex;
				align-items: flex-end;
				.btn{
					width: 690rpx;
					line-height: 88rpx;
					margin: 0 auto;
					background: #F05329;
					border-radius: 10rpx;
					font-size: 38rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
